<template>
  <div class="defaultBody">
    <el-config-provider :locale="locale">
      <div class="mainHeader">
        <Header @langChange="langChange"/>
      </div>
      <div class="mainNav">
        <Navigate :language="localeLan" @userData="userDataChange"/>
      </div>

      <div class="contentBody">
        <slot />
      </div>
      
      <div class="mainFooter">
        <Footer :language="localeLan" @productTypesChange="productTypesChange"></Footer>
      </div>
        
    </el-config-provider>
    
  </div>
</template>

<script lang="ts" setup>

  import { zhCn, en } from 'element-plus/es/locale/index.mjs';
  import { throwError } from 'element-plus/es/utils/error.mjs';
  import { useI18n } from 'vue-i18n'

  const locale = ref(zhCn)
  const { locale: localeLan } = useI18n()

  const productTypes = ref([])

  const { proxy }: any = getCurrentInstance()
  const userData=ref({})
  function langChange(val:any,lang:any) {
      // console.log("语言切换：", val)
      locale.value = lang
      if (val=='Zh') {          
          localeLan.value = 'zh'
      } else {
          localeLan.value = 'en'
      }
  }

  function productTypesChange(val:any) {
      console.log("所有产品类型：", val)
      productTypes.value=val
  }

  function userDataChange(val:any) {
      // console.log("用户信息：", val)
      userData.value=val
      console.log("userData.value: ",userData.value)
  }

  //故意报错
  // throwError("error by self 刘一刀","2024年7月30日")
</script>
<style lang="scss">
.defaultBody{
  min-width: 1366px;
}
  .mainHeader{
    position: fixed;
    display: flex;
    width: 100%;
    z-index: 2;
  }
  .mainNav{
    position: fixed;
    display: flex;
    width: 100%;
    top: 35px;
    z-index: 1;
  }
  .contentBody{
    padding-top: 105px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    // padding: 0 3%;
    // margin: 0 auto;
    // height: 100%;
  }
  .mainFooter{
    margin-top: 20px;
  }
  
</style>